<template>
  <div class="title">
    <avatar-component v-if="thread.type !== 5" :author="author">
      {{ $t('topic.publishAt') }} {{ timerDiff(thread.createdAt) + $t('topic.before') }} ..
      （{{ $t('topic.editAt') }} {{ timerDiff(thread.firstPost ? thread.firstPost.updatedAt : '') + $t('topic.before') }}）
    </avatar-component>
    <!--问答帖特殊展示-->
    <avatar-component v-else :author="author">
      {{ timerDiff(thread.createdAt) + $t('topic.before') + '...' + $t('topic.to') }}
      <nuxt-link :to="'/user/' + beAskedUser._jv.id" class="be-ask-user">{{ ' @' + beAskedUser.username }}</nuxt-link>
      {{ ' ' + $t('topic.ask') }}
    </avatar-component>
    <div class="container-management">
      <el-dropdown
        v-show="managementList.length > 0 && managementList.some(item => item.canOpera)"
        class="dropdown"
        placement="bottom"
        trigger="click"
        @command="handleCommand"
        @visible-change="visibile => isManagementDrop = visibile"
      >
        <div :class="{'management': true, 'on-drop': isManagementDrop}">
          <svg-icon type="setting" class="icon-setting" style="font-size: 16px" />
          <span> {{ $t('topic.management') }} </span>
        </div>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px">
          <el-dropdown-item
            v-for="(item, index) in managementList"
            :key="index"
            :command="{command: item.command ,item}"
            style="border-bottom: 1px solid #EDEDED; width: 98px; text-align: center"
          >
            {{ item.text }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="report" @click="reportClick">
        <svg-icon type="report" class="icon-setting" style="font-size: 16px" />
        <span>{{ $t('report.reportTitle') }}</span>
      </div>
      <topic-report v-if="isReport" :thread-id="thread._jv.id" :type="1" @close="isReport = false" />
      <div v-if="thread.isEssence" class="essence">
        <svg-icon style="font-size: 25px;" type="essence" />
      </div>
    </div>
  </div>
</template>

<script>
import timerDiff from '@/mixin/timerDiff'

export default {
  name: 'TopicHeader',
  mixins: [timerDiff],
  props: {
    author: {
      type: Object,
      default: () => { }
    },
    thread: {
      type: Object,
      default: () => { }
    },
    managementList: {
      type: Array,
      default: () => []
    },
    beAskedUser: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isManagementDrop: false,
      isReport: false
    }
  },
  methods: {
    handleCommand({ command, item }) {
      if (command === 'toEdit') return this.$router.push(`/thread/post?type=${this.thread.type}&operating=edit&threadId=${this.thread._jv.id}`)
      if (command === 'isDeleted') return this.deleteConfirm(item)
      this.$emit('managementSelected', item)
    },
    deleteConfirm(item) {
      this.$confirm(this.$t('topic.confirmDelete'), this.$t('discuzq.msgBox.title'), {
        confirmButtonText: this.$t('discuzq.msgBox.confirm'),
        cancelButtonText: this.$t('discuzq.msgBox.cancel'),
        type: 'warning'
      }).then(() => this.$emit('managementSelected', item))
    },
    reportClick() {
      this.isReport = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.el-dropdown-menu__item:hover {
  background: #ffffff;
  color: $color-blue-base;
}
.title {
  height: 50px;
  display: flex;
  justify-content: space-between;

  .be-ask-user {
    color: $color-blue-base;
    cursor: pointer;
  }
  > .container-management {
    display: flex;
    .report {
      margin-top: 5px;
      font-size: 12px;
      cursor: pointer;
      color: #d0d4dc;
      margin-right: 20px;
      height: 16px;
      display: flex;
      align-items: center;
      > span {
        margin-left: 5px;
      }
      .warning {
        height: 16px;
      }
    }
    > .dropdown {
      height: 20px;

      > .management {
        display: flex;
        align-items: center;
        margin-top: 5px;
        margin-right: 20px;
        font-size: 12px;
        cursor: pointer;
        color: $font-color-grey;
        > span {
          margin-left: 5px;
        }

        &:focus {
          border: none;
          outline: none;
        }

        &.on-drop {
          color: $color-blue-base;
          > .icon-setting {
            fill: $color-blue-base;
          }
        }
      }
    }
  }
}
</style>
